<style>
    * {
        margin:0;
        padding:0;
    }
    body{
        background-color: rgba(0,0,0,0.1);
    }
    canvas{
        display: block;
        margin: 100px auto;
    }
</style>
<body>
    <div id="container"></div>
    <script src="http://www.yanhuangxueyuan.com/threejs/build/three.min.js"></script>
    <script id="vertexShader" type="x-shader/x-vertex">
        void main() {
            gl_Position = vec4( position, 1.0 );
        }
    </script>

    <!-- <script id="fragmentShader" type="x-shader/x-fragment">
        //距离场
        #ifdef GL_ES
        precision mediump float;
        #endif

        uniform vec2 u_resolution;
        uniform vec2 u_mouse;
        uniform float u_time;

        void main(){
            vec2 st = gl_FragCoord.xy/u_resolution;
            float pct = 0.0;

            // a. The DISTANCE from the pixel to the center
            pct = distance(st,vec2(0.5));

            // b. The LENGTH of the vector from the pixel to the center
            // vec2 toCenter = vec2(0.5)-st;
            // pct = length(toCenter);
            
            vec3 color = smoothstep(0.0,0.45,vec3(pct));

            gl_FragColor = vec4( color, 1.0 );
        }

    </script> -->

    <!-- <script id="fragmentShader" type="x-shader/x-fragment">
        //距离场-点乘
        #ifdef GL_ES
        precision mediump float;
        #endif

        uniform vec2 u_resolution;
        uniform vec2 u_mouse;
        uniform float u_time;

        float circle(in vec2 _st, in float _radius){
            //得到向量
            vec2 dist = _st - vec2(0.5);
            return 1.-smoothstep(_radius-(_radius*0.01), _radius+(_radius*0.01), dot(dist,dist)*4.0);
        }

        void main(){
            vec2 st = gl_FragCoord.xy/u_resolution.xy;

            vec3 color = vec3(circle(st,0.9));

            gl_FragColor = vec4( color, 1.0 );
        }

    </script> -->

    <!-- <script id="fragmentShader" type="x-shader/x-fragment">
        #ifdef GL_ES
        precision mediump float;
        #endif

        uniform vec2 u_resolution;
        uniform vec2 u_mouse;
        uniform float u_time;

        void main(){
        vec2 st = gl_FragCoord.xy/u_resolution.xy;
        st.x *= u_resolution.x/u_resolution.y;
        vec3 color = vec3(0.0);
        float d = 0.0;

        // Remap the space to -1. to 1.
        st = st *2.-1.;

        // Make the distance field
        d = length( abs(st)-.3 );
        // d = length( min(abs(st)-.3,0.) );
        // d = length( max(abs(st)-.3,0.) );

        // Visualize the distance field
        gl_FragColor = vec4(vec3(fract(d*10.0)),1.0);

        // Drawing with the distance field
        // gl_FragColor = vec4(vec3( step(.3,d) ),1.0);
        // gl_FragColor = vec4(vec3( step(.3,d) * step(d,.4)),1.0);
        // gl_FragColor = vec4(vec3( smoothstep(.3,.4,d)* smoothstep(.6,.5,d)) ,1.0);
        }
    </script> -->

    <script id="fragmentShader" type="x-shader/x-fragment">
        //极坐标下的图形
        #ifdef GL_ES
        precision mediump float;
        #endif

        uniform vec2 u_resolution;
        uniform vec2 u_mouse;
        uniform float u_time;

        void main(){
            vec2 st = gl_FragCoord.xy/u_resolution.xy;
            vec3 color = vec3(0.0);

            vec2 pos = vec2(0.5)-st;

            float r = length(pos)*2.0;
            float a = atan(pos.y,pos.x);

            float f = cos(a*3.);
            // f = abs(cos(a*3.));
            // f = abs(cos(a*2.5))*.5+.3;
            // f = abs(cos(a*12.)*sin(a*3.))*.8+.1;
            // f = smoothstep(-.5,1., cos(a*10.))*0.2+0.5;

            color = vec3( 1.-smoothstep(f,f+0.02,r) );

            gl_FragColor = vec4(color, 1.0);
        }

    </script>
    
    <script>
        var container;
        var camera, scene, renderer;
        var uniforms;

        init();
        animate();

        function init() {
            container = document.getElementById( 'container' );

            camera = new THREE.Camera();
            camera.position.z = 1;

            scene = new THREE.Scene();

            var geometry = new THREE.PlaneBufferGeometry( 2, 2 );

            uniforms = {
                u_time: { type: "f", value: 1.0 },
                u_resolution: { type: "v2", value: new THREE.Vector2() }
            };

            var material = new THREE.ShaderMaterial( {
                uniforms: uniforms,
                vertexShader: document.getElementById( 'vertexShader' ).textContent,
                fragmentShader: document.getElementById( 'fragmentShader' ).textContent
            } );

            var mesh = new THREE.Mesh( geometry, material );
            scene.add( mesh );

            renderer = new THREE.WebGLRenderer();
            renderer.setPixelRatio( window.devicePixelRatio );

            container.appendChild( renderer.domElement );

            onWindowResize();
            window.addEventListener( 'resize', onWindowResize, false );
        }

        function onWindowResize( event ) {
            renderer.setSize( window.innerHeight/2, window.innerHeight/2 );
            uniforms.u_resolution.value.x = renderer.domElement.height/2;
            uniforms.u_resolution.value.y = renderer.domElement.height/2;
        }

        function animate() {
            requestAnimationFrame( animate );
            render();
        }

        function render() {
            uniforms.u_time.value += 0.05;
            renderer.render( scene, camera );
        }
    </script>
</body>